#openai-floating-button {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 64px; /* 增加宽度 */
    height: 48px;
    background-color: #ffffff;
    border-radius: 24px 0 0 24px; /* 只设置左侧圆角 */
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    padding-right: 8px; /* 图标稍微偏右 */
}

#openai-floating-button:hover {
    width: 72px; /* 悬停时稍微展开 */
    box-shadow: -3px 2px 15px rgba(0, 0, 0, 0.2);
}

#openai-floating-button.active {
    right: 400px; /* 与侧边栏宽度对应 */
    border-radius: 24px; /* 激活时变成完整的圆形 */
    width: 48px; /* 激活时变成正圆形 */
    padding-right: 0; /* 移除右侧内边距 */
}

#openai-floating-button img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    alt: 'AI聊天助手';
}

#openai-floating-button:hover img {
    transform: scale(1.1);
}

#openai-chat-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* 初始位置在屏幕外 */
    width: 400px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999997;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

#openai-chat-sidebar.active {
    right: 0; /* 激活时滑入屏幕 */
}

/* 添加动画效果 */
@keyframes slideIn {
    from {
        right: -400px;
    }
    to {
        right: 0;
    }
}

@keyframes slideOut {
    from {
        right: 0;
    }
    to {
        right: -400px;
    }
}

/* 添加一些动画效果 */
@keyframes pulse {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.05); }
    100% { transform: translateY(-50%) scale(1); }
}

/* 初次加载时的动画效果 */
#openai-floating-button.initial-load {
    animation: pulse 2s ease-in-out;
}
